<template>
    <div>
        <div class="contence">
            <p class="home"><a href="./main.html">首页</a>><a href="./message.html">景区</a>> <span>详情</span></p>
            <div class="travlmess">
                <div class="travlleft">
                    <img src="../assets/image/detail_mess.jpg" alt="">
                </div>
                <div class="trabright">
                    <p class="thostitle">海南 | 三亚 天涯海角旅游度假区票，海滨风情</p>
                    <p class="thoscontence">
                        这里有美丽迷人的热带自然海滨风光，悠久的历史文化和浓郁多彩的民族风情。依山傍海，宛若七彩交融的丹青画屏，形成南国所拥有的椰风海韵迷人风景线，醉心于此，体验热带文化风情。</p>
                    <div class="pricedetails">
                        <p class="newprice"><i>￥</i>77 <span>起</span></p>
                        <span class="beforeprice">门市价：95元</span>
                        <span>节省18元</span>
                    </div>
                    <div class="goods">
                        <p class="goodsgreat"><span>好评率：</span>96%</p>
                        <p class="goodsgreat"><span>已售：</span>3030</p>
                        <p class="goodsgreat"><span>点评：</span>123</p>
                    </div>
                    <div class="cando">
                        <div class="eachone">
                            <div class="favorite"></div> <span>收藏</span>
                        </div>
                        <div class="eachone">
                            <div class="shareto"></div> <span>分享到</span>
                        </div>
                    </div>
                </div>
            </div>
            <ul class="fourtab">
                <li class="checkon">旅游须知</li>
                <li>交通指南</li>
                <li>详情介绍</li>
                <li>用户评价</li>
            </ul>
            <div class="allmessages">
                <div class="eachother">
                    <p class="newtitle">
                        <img src="../assets/image/details.png" alt="" class="backimg">
                        <span>旅游须知</span>
                    </p>
                    <ul class="eachdetails">
                        <li>
                            <p class="each_title">【使用方式】</p>
                            <p class="each_contence">取票方式：凭手机短信收到的二维码至景区入园检票口扫码入园。</p>
                        </li>
                        <li>
                            <p class="each_title">【使用时间】</p>
                            <p class="each_contence">天涯海角开放时间：08:30-22:00</p>
                        </li>
                        <li>
                            <p class="each_title">【加购套餐项目】</p>
                            <p class="each_contence">
                                门票政策：身高1.2m（不含）以下儿童，70周岁（含）以上老人（凭身份证）及持军官证、士兵证、记者证（国家新闻总署颁发的）、导游证人群均可免票；1.2-1.4m儿童，60-69周岁老人（凭身份证）及持有效学生证的学生均可至景区自行购买优惠票，其余人群可在线购买。
                            </p>
                        </li>
                        <li>
                            <p class="each_title">【额外服务提示】</p>
                            <p class="each_contence">景区提供收费停车，具体收费标准以景区公告为准。</p>
                        </li>
                        <li>
                            <p class="each_title">【其他提示】</p>
                            <p class="each_contence">参观自然、名胜古迹或文化遗产景区时，严禁乱涂乱画，请珍惜爱护文物及自然资源。
                                <br />·到海边或树林茂密的地方，注意做好防虫防晒措施。</p>
                        </li>
                        <li>
                            <p class="each_title">【安全提示】</p>
                            <p class="each_contence">旅游出行有风险，建议您自行购买相关保险。
                                <br />·为提高游客的出行安全意识，普及旅游基本安全常识，减少安全事故的发生，请您在预订产品前，仔细阅读《要出发旅游安全手册》并在旅游过程中严格遵守各项安全注意事项，保障您拥有一个愉快的旅程。
                            </p>
                        </li>
                        <li>
                            <p class="each_title">【价格说明】</p>
                            <p class="each_contence">
                                本平台展示的商品划横线价格为顾客参考价格，该价格可能是景区/酒店等终端产品提供方曾经的门市价、挂牌价或该商品在其他平台上曾经展示过的销售价，不具备原价的含义，该价格仅供您参考。
                            </p>
                        </li>
                    </ul>
                </div>
                <!-- 交通指南 -->
                <div class="eachother">
                    <p class="newtitle">
                        <img src="../assets/image/rolad.png" alt="" class="backimg">
                        <span>交通指南</span>
                    </p>
                    <div class="eachdetails eachtwo">
                        <p class="rload_title">主要路线</p>
                        <p class="rload_contence">
                            从凤凰机场出发：<br />
                            机场→8路→三亚湾新城（机场路口）站→凤凰京润珍珠馆站→16路→天涯海角站→三亚天涯海角旅游度假区。<br />
                            从火车站出发：<br />
                            火车站→29路→凤凰机场路口站→凤凰京润珍珠馆站→16路→天涯海角站→三亚天涯海角旅游度假区。<br />
                            从汽车总站出发：<br />
                            汽车站→16路→天涯海角站→三亚天涯海角旅游度假区。
                        </p>
                    </div>
                </div>
                <!-- 详情介绍 -->
                <div class="eachother">
                    <p class="newtitle">
                        <img src="../assets/image/introduce.png" alt="" class="backimg">
                        <span>详情介绍</span>
                    </p>
                    <div class="eachdetails introducetotalk">
                        <p class="introdetails">
                            <img src="" alt="">
                            推荐理由:</p>
                        <p class="intrcontence">
                            1、国家AAAA级旅游景区，海南建省20年的一大旅游名胜，感受椰风海韵；<br />
                            2、特色景点有天涯石、海角石、日月石、南天一柱、天涯海角星、海判南天石等；<br />
                            3、浪漫海滨小调，古韵南国风情，情侣、亲子休闲度假之选；<br />
                            4、景区内设三大美食广场，尝尽港台海美食，其中生猛海鲜琳琅满目。
                        </p>
                        <ul class="introeach">
                            <li>
                                <div class="introeach_tite">一石一故，百石百态</div>
                                <div class="introeach_contence">
                                    <p>天涯海角景区内，矗立着千姿百态的石头，殊不知每块普通的石头背后都有着一段悠久历史，抑或是一个凄美动人故事；人走茶凉，但海没枯石未烂，它们无言但却有声，默默讲述着一段段兴衰，一节节人生起伏。
                                    </p>
                                    <img src="../assets/image/introeach1.jpg" alt="">
                                    <p>天涯海角景区内，矗立着千姿百态的石头，殊不知每块普通的石头背后都有着一段悠久历史，抑或是一个凄美动人故事；人走茶凉，但海没枯石未烂，它们无言但却有声，默默讲述着一段段兴衰，一节节人生起伏。
                                    </p>
                                </div>
                            </li>
                            <li>
                                <div class="introeach_tite">蓝天下结良缘，碧海上寻刺激</div>
                                <div class="introeach_contence">
                                    <p>“天涯海角”早时用来表达一种异乡的情结，经过千百年的积淀，承载了丰富深刻的文化内涵，现在男女恋爱常以“天涯海角永相随”来表明自己的心迹，所以在天涯海角，椰林树影、蓝天碧海、广袤洁净的沙滩上或是天涯海角的教堂内时常能碰到新郎新娘的身影，在徐徐海风、微微涛声中，成为别人羡慕的一道风景线
                                    </p>
                                    <img src="../assets/image/introeach1.jpg" alt="">
                                    <p>“天涯海角”早时用来表达一种异乡的情结，经过千百年的积淀，承载了丰富深刻的文化内涵，现在男女恋爱常以“天涯海角永相随”来表明自己的心迹，所以在天涯海角，椰林树影、蓝天碧海、广袤洁净的沙滩上或是天涯海角的教堂内时常能碰到新郎新娘的身影，在徐徐海风、微微涛声中，成为别人羡慕的一道风景线
                                    </p>
                                </div>
                            </li>
                        </ul>

                    </div>
                </div>
                <!-- 用户评价 -->
                <div class="eachother">
                    <p class="newtitle">
                        <img src="../assets/image/replywrite.png" alt="" class="backimg">
                        <span>用户评价</span>
                    </p>
                    <div class="eachdetails usercomments">
                        <div class="scores">
                            <div class="getscroe">
                                <div class="scorexing"></div>
                                <p class="scroenumber">评分 32人</p>
                            </div>
                            <ul class="threetypes">
                                <li>
                                    <span>好评</span>
                                    <div class="length">
                                        <div class="orange goodlength"></div>
                                    </div>
                                    <span>96%</span>
                                </li>
                                <li>
                                    <span>中评</span>
                                    <div class="length">
                                        <div class="orange middlelength"></div>
                                    </div>
                                    <span>4%</span>
                                </li>
                                <li>
                                    <span>差评</span>
                                    <div class="length">
                                        <div class="orange baddlength"></div>
                                    </div>
                                    <span>0%</span>
                                </li>
                            </ul>
                        </div>
                        <div class="scorecomments">
                            <div class="commcon">
                                <div>评论者</div>
                                <div>评论</div>
                                <div>评分</div>
                            </div>
                            <div class="eachconn">
                                <div class="eachdwsds">
                                    <div class="userimg">
                                        <img src="../assets/image/usericon.png" alt=""><br />
                                        <span class="username">张**</span>
                                    </div>
                                    <div>要出发太好了，方便，快捷，还便宜～每次出行都是要出发上面预订，希望酒店能再多一些</div>
                                    <div class="scoresdetails">
                                        <div class="plxing">
                                            <img src="../assets/image/smallstart.png" alt="">
                                            <img src="../assets/image/smallstart.png" alt="">
                                            <img src="../assets/image/smallstart.png" alt="">
                                            <img src="../assets/image/smallstart.png" alt="">
                                        </div>
                                        <p class="whojingqu">三亚天涯海角旅游度假区门票1张</p>
                                        <p class="ctime">2019-06-18 19:06:31</p>
                                    </div>
                                </div>
                                <div class="eachdwsds">
                                    <div class="userimg">
                                        <img src="../assets/image/usericon.png" alt=""><br />
                                        <span class="username">张**</span>
                                    </div>
                                    <div>要出发太好了，方便，快捷，还便宜～每次出行都是要出发上面预订，希望酒店能再多一些</div>
                                    <div class="scoresdetails">
                                        <div class="plxing">
                                            <img src="../assets/image/smallstart.png" alt="">
                                            <img src="../assets/image/smallstart.png" alt="">
                                            <img src="../assets/image/smallstart.png" alt="">
                                            <img src="../assets/image/smallstart.png" alt="">
                                        </div>
                                        <p class="whojingqu">三亚天涯海角旅游度假区门票1张</p>
                                        <p class="ctime">2019-06-18 19:06:31</p>
                                    </div>
                                </div>
                                <div class="eachdwsds">
                                    <div class="userimg">
                                        <img src="../assets/image/usericon.png" alt=""><br />
                                        <span class="username">张**</span>
                                    </div>
                                    <div>要出发太好了，方便，快捷，还便宜～每次出行都是要出发上面预订，希望酒店能再多一些</div>
                                    <div class="scoresdetails">
                                        <div class="plxing">
                                            <img src="../assets/image/smallstart.png" alt="">
                                            <img src="../assets/image/smallstart.png" alt="">
                                            <img src="../assets/image/smallstart.png" alt="">
                                            <img src="../assets/image/smallstart.png" alt="">
                                        </div>
                                        <p class="whojingqu">三亚天涯海角旅游度假区门票1张</p>
                                        <p class="ctime">2019-06-18 19:06:31</p>
                                    </div>
                                </div>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </div>
        <footers></footers>
        <evelator></evelator>
        <login v-show="loginbool" @closelogin="changelb"></login>
    </div>
</template>

<script>
    export default {
        name: '',
        data() {
            return {
                loginbool:false,
                list:[]
            }
        },
        methods: {
            changelb(){
                this.loginbool=!this.loginbool
            },
        },
        created() {
            this.list=JSON.parse(localStorage.getItem("viewdetails"))
        },
    }
</script>

<style scoped>
    .contence {
        width: 1520px;
        margin: 0 auto;
        position: relative;
    }

    .home {
        padding-top: 25px;
        padding-bottom: 20px;
        font-size: 25px;
        font-family: PingFangSC-Medium, PingFang SC;
        font-weight: 500;
        color: rgba(52, 52, 52, 1);
        border-bottom: 3px solid rgba(17, 123, 241, 1);
    }

    .home a {
        color: rgba(52, 52, 52, 1);
    }

    .home a:hover {
        color: rgba(17, 123, 241, 1);
    }

    .home span {
        color: rgba(17, 123, 241, 1);
    }

    .travlmess {
        width: 100%;
        /* height: 460px; */
        box-sizing: border-box;
        padding: 20px;
        display: flex;
        justify-content: space-between;
        position: relative;
        margin-top: 30px;
        background: #fff;
    }

    .travlleft {
        width: 770px;
        height: 430px;
    }

    .travlleft img {
        width: 100%;
        height: 100%;
        object-fit: cover;
    }

    .trabright {
        width: 680px;
    }

    .thostitle {
        font-size: 34px;
        font-weight: bold;
        color: #333;
        font-family: PingFangSC-Medium, PingFang SC;
    }

    .thoscontence {
        /* height: 62px; */
        font-size: 24px;
        color: #999;
        margin: 10px 0;
        /* overflow: hidden; */
    }

    .pricedetails {
        display: flex;
        align-items: center;
        color: #999;
        font-size: 22px;
        margin-top: 40px;
    }

    .newprice {
        font-size: 55px;
        color: #ff4500;
        display: flex;
        align-items: center;
    }

    .newprice i {
        font-size: 34px;
        padding-right: 3px;
    }

    .newprice span {
        color: #999;
        font-size: 22px;
        padding-left: 10px;
    }

    .beforeprice {
        text-decoration: line-through;
        padding-left: 50px;
    }

    .pricedetails>span:last-child {
        padding-left: 50px;
    }

    .goods {
        height: 60px;
        box-sizing: border-box;
        padding: 15px 0;
        /* line-height: 60px; */
        font-size: 26px;
        color: #64b052;
        display: flex;
        align-items: center;
        font-family: "Microsoft YaHei", "\5FAE\8F6F\96C5\9ED1";
        margin-top: 20px;
    }

    .goods>p {
        padding: 0 20px;
        border-right: 1px solid #e1e1e1;
    }

    .goods>p:first-child {
        padding: 0 20px 0 0;
    }

    .goods>p:last-child {
        border-right: none;
    }

    .goodsgreat span {
        color: #666;
    }

    .cando {
        display: flex;
        align-items: center;
        justify-content: flex-end;
        font-size: 26px;
        color: #333;
        font-family: "Microsoft YaHei", "\5FAE\8F6F\96C5\9ED1";
        margin-top: 30px;
    }

    .cando>div {
        display: flex;
        align-items: center;
    }

    .cando>div:first-child {
        margin-right: 30px;
    }

    .eachone>div {
        width: 30px;
        height: 30px;
    }

    .favorite {
        background: url(../assets/image/favorit.png);
        background-size: 100%;
    }

    /* 喜欢成功 */
    .hasfavorite {
        background: url(../assets/image/favorit.png);
        background-size: 100%;
        background-position: 0px -18px;
    }

    .shareto {
        background: url(../assets/image/share.png);
        background-size: 100%;
    }

    .eachone>span {
        margin-left: 10px;
    }

    .fourtab {
        width: 100%;
        display: flex;
        align-items: center;
    }

    .fourtab>li {
        width: 25%;

    }

    .fourtab {
        width: 100%;
        display: flex;
        align-items: center;
        background: #fff;
        margin-top: 40px;
    }

    li.checkon {
        background: #FF7800;
        color: #fff;
    }

    .fourtab>li {
        width: 25%;
        font-size: 28px;
        height: 100px;
        line-height: 100px;
        text-align: center;
        cursor: pointer;
        box-sizing: border-box;
        border-right: 1px solid #e9eef2;
    }


    .allmessages {
        background: #fff;
        margin-top: 40px;
        font-family: "Microsoft YaHei", "\5FAE\8F6F\96C5\9ED1";
    }

    /* 旅游须知 */
    .newtitle {
        height: 100px;
        border-bottom: 1px #e1e1e1 solid;
        font-size: 34px;
        color: #333;
        line-height: 100px;
        font-weight: bold;
        padding: 0 20px;
        display: flex;
        align-items: center;
    }

    .newtitle>span:last-child {
        padding-left: 20px;
    }

    .backimg {
        width: 70px;
        height: 70px;
        display: inline-block;
    }

    .eachdetails {
        padding: 20px;
        font-size: 28px;
        line-height: 60px;
        font-family: "Microsoft YaHei", "\5FAE\8F6F\96C5\9ED1";
    }

    ul.eachdetails>li {
        margin-bottom: 20px;
    }

    .each_title {
        font-weight: bold;
    }

    .each_contence {
        text-indent: 2em;
        position: relative;
        padding-left: 20px;
    }

    p.each_contence::after {
        display: inline-block;
        content: '';
        width: 12px;
        height: 12px;
        background: #000;
        border-radius: 50%;
        position: absolute;
        top: 25px;
        left: 2em;
    }

    /* 交通指南 */
    .eachtwo {
        font-size: 23px;
        line-height: 50px;
    }

    .rload_contence {
        padding-left: 100px;
    }

    /* 详情介绍 */
    .introducetotalk {
        font-size: 24px;
        line-height: 55px;
        color: #3e3e3e;
    }

    .introdetails {
        color: #ff9000;
        padding-left: 15px;
    }

    .introeach>li {
        position: relative;
    }

    .introeach_tite {
        padding-left: 24px;
        color: #ff9000;
        border-bottom: 1px solid #ff9000;
        margin-bottom: 20px;
        font-weight: 600;
    }

    .introeach_tite::after {
        display: inline-block;
        content: '';
        width: 10px;
        height: 30px;
        background: #ff9000;
        position: absolute;
        left: 0;
        top: 12px;
    }

    .introeach_contence {
        text-align: center;
    }

    .introeach_contence p {
        text-align: justify;
    }

    .introeach_contence img {
        width: 80%;
        height: 600px;
        margin: 0 auto;
        margin-top: 10px;
    }

    /*  */
    .usercomments {
        line-height: normal;
        padding: 50px 0;
    }

    .scores {
        display: flex;
        align-items: center;
        justify-content: space-between;
    }

    .getscroe {
        width: 40%;
        text-align: center;
    }

    /* 评分星数 */
    .scorexing {
        width: 44%;
        /* 9的倍数 */
        height: 60px;
        background: url(../assets/image/start.png) no-repeat;
        margin: 0 auto;
    }

    .scroenumber {
        color: #333;
        margin-top: 10px;
    }

    ul.threetypes {
        width: 60%;
        box-sizing: border-box;
        padding: 0 100px;
        border-left: 1px solid #e1e1e1;
    }

    .threetypes>li {
        display: flex;
        align-items: center;
        color: #333;
        font-size: 26px;
        margin-top: 10px;
    }

    .threetypes>li:first-child {
        margin-top: 0;
    }

    .length {
        width: 500px;
        height: 40px;
        margin: 0 25px;
        background: #e1e1e1;
    }

    .orange {
        width: 0%;
        height: 100%;
        background: #ff7800;
    }

    .goodlength {
        width: 96%;
    }

    .middlelength {
        width: 4%;
    }

    .commcon {
        height: 50px;
        line-height: 50px;
        margin: 40px 30px;
        background: #f0f0f0;
        color: #333;
        display: flex;
        font-size: 25px;
        justify-content: space-between;
    }

    .commcon>div {
        text-align: center;
    }

    .commcon>div:nth-of-type(1) {
        width: 20%;
    }

    .commcon>div:nth-of-type(3) {
        width: 20%;
    }

    .eachoneconn {
        display: flex;
        align-items: center;
    }

    .eachconn {
        margin: 0 30px;
    }

    .eachdwsds {
        display: flex;
        border-bottom: 1px solid #f3f3f3;
        color: #999;
        font-size: 20px;
        height: 200px;
        box-sizing: border-box;
        justify-content: space-between;
        padding: 30px 0;
    }

    .userimg {
        width: 20%;
        text-align: center;
        line-height: 40px;
    }

    .userimg>img {
        width: 39%;
        height: 100px;
        object-fit: cover;
        border-radius: 5px;
    }

    .scoresdetails {
        width: 20%;
    }

    .plxing {
        width: 56%;
        height: 35px;
    }

    p.ctime {
        padding-top: 10px;
    }
</style>